<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>水晶按钮</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	.button {
		width: 120px;
		height: 24px;
		padding: 5px 16px 3px;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border: 2px solid #ccc;
		position: relative;

		/* Label */
		font-family: Lucida Sans, Helvetica, sans-serif;
		font-weight: 800;
		color: #fff;
		text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.aqua {
		background-color: rgba(60, 132, 198, 0.8);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
		border-top-color: #8ba2c1;
		border-right-color: #5890bf;
		border-bottom-color: #4f93ca;
		border-left-color: #768fa5;
		-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
		-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
	}

	.button .glare {
		position: absolute;
		top: 0;
		left: 5px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		height: 1px;
		width: 142px;
		padding: 8px 0;
		background-color: rgba(255, 255, 255, 0.25);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
	}
</style>
<body>
<div class="button aqua">
	<div class="glare"></div>
	Button
</div>
</body>
</html>